<template>
    <v-dialog v-model="dialog" max-width="600px" persistent>
        <v-card>
            <v-card-title class="d-flex align-center pa-4">
                <v-icon color="primary" class="mr-2">mdi-account-search</v-icon>
                选择经纪人
            </v-card-title>
            <v-card-text>
                <v-row>
                    <v-col cols="12">
                        <v-text-field v-model="searchQuery" label="搜索经纪人" prepend-inner-icon="mdi-magnify"
                            variant="outlined" density="comfortable" clearable @input="searchBrokers" />
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12">
                        <v-data-table :headers="headers" :items="brokerList" :loading="loading" :items-per-page="10"
                            class="elevation-10 rounded-lg">
                            <template #item.actions="{ item }">
                                <v-btn color="primary" variant="text" @click="selectBroker(item)">
                                    选择
                                </v-btn>
                            </template>
                        </v-data-table>
                    </v-col>
                </v-row>
            </v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn color="grey-darken-1" variant="text" @click="close">
                    取消
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getList } from '@/api/system/brokerinfo/BrokerInfoManagementApi';
import { useMessage } from '@/composables/useMessage';

const { error: showError } = useMessage();

// Props
interface Props {
    modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false
});

// Emits
const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    'select': [broker: any];
}>();

// 响应式数据
const dialog = ref(false);
const searchQuery = ref('');
const loading = ref(false);
const brokerList = ref<any[]>([]);

// 表格列定义
const headers = [
    { title: '经纪人名称', key: 'preferredName', sortable: true },
    { title: '联系电话', key: 'phone', sortable: false },
    { title: '邮箱', key: 'email', sortable: false },
    { title: '操作', key: 'actions', sortable: false, width: 100 },
];

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
    dialog.value = newVal;
    if (newVal) {
        searchBrokers();
    }
});

// 监听 dialog 变化
watch(() => dialog.value, (newVal) => {
    emit('update:modelValue', newVal);
});

// 搜索经纪人
async function searchBrokers() {
    loading.value = true;
    try {
        const { data } = await getList({
            pageNo: 1,
            pageSize: 10,
            preferredName_LIKE: searchQuery.value
        });
        if (data) {
            brokerList.value = data.rows || [];
        }
    } catch (error) {
        console.error('搜索经纪人失败:', error);
        showError('搜索经纪人失败');
    } finally {
        loading.value = false;
    }
}

// 选择经纪人
function selectBroker(broker: any) {
    emit('select', broker);
    close();
}

// 关闭对话框
function close() {
    dialog.value = false;
    searchQuery.value = '';
}
</script>

<style lang="scss" scoped>
.v-data-table {
    :deep(.v-data-table__wrapper) {
        overflow-x: auto;
    }
}
</style>
